<template>
	<div>
		<div
			v-for="(processItem, processIndex) in processList"
			:key="processIndex"
			class="process-item"
		>
			<div class="process-item-label">{{ processItem.processName }} ({{ processItem.machineRunStateList.length }}台)</div>
			<el-row :gutter="8" class="process-item-content">
				<el-col
					v-for="(machineItem, machineIndex) in processItem.machineRunStateList"
					:key="machineIndex"
					class=""
					:xl="3"
					:lg="4"
					:md="6"
					:sm="8"
					:xs="24"
					:class="[
						[2, 3, 4].includes(machineItem.state) ? 'machine-ani' : ''
					]"
				>
					<div class="machine-item">
						<div
							class="machine-item-inner"
							:style="setGridStyle(machineItem)"
							@click="onMachineItem(machineItem)"
						>
							<div class="card-title el-icon-">{{ machineItem.state === 4 ? '️' : '' }} {{ machineItem.machineName }}</div>
							<!--<div class="card-content">
                                <div class="el-icon-" style="font-size: 12px;">{{ machineItem.state === 0 || machineItem.state === 3 ? '️罗拉转速' : '' }}</div>
                                <div class="el-icon-" style="font-size: 12px;">{{ machineItem.state === 0 || machineItem.state === 3 ? '️后牵伸倍数' : '' }}</div>
                            </div>-->
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
    import { machineStateList } from '../../../../../utils/jk/status-option-list';

    export default {
        props: {
            processList: {
                type: Array,
                default() {
                    return [];
                }
            },
            stateList: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                machineStateList: machineStateList
            };
        },
        methods: {
            setGridStyle(item) {
                const legendItem = this.machineStateList.find(x => x.id === item.state) || {};
                return {
                    color: '#fff',
                    background: legendItem ? legendItem.color : '#808695'
                };
            },
            onMachineItem(e) {
                this.$emit('click', e);
            }
        }
    };
</script>
<style scoped lang="scss">
    .process-item {
        margin-bottom: 10px;
        .process-item-label {
            height: 36px;
            color: #2d8cf0;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-left: solid 4px #2d8cf0;
            border-radius: 4px;
            padding-left: 10px;
        }
        .process-item-content {
            .machine-ani {
                animation: aniName 1.5s infinite linear;
            }
            .machine-item {
                border-radius: 10px;
                box-sizing: border-box;
                padding: 4px 0;
                .machine-item-inner {
                    width: 100%;
                    height: 100%;
                    background: #122054;
                    border-radius: 4px;
                    border: solid 1px #0c347f;
                    box-sizing: border-box;
                    cursor: pointer;
                    .card-title {
                        height: 32px;
                        box-sizing: border-box;
                        font-size: 14px;
                        padding: 0 12px;
                        color: #e8eaec;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .card-content {
                        padding: 6px 12px;
                        box-sizing: border-box;
                        color: #dcdee2;
                        display: flex;
                        justify-content: center;
                        align-items: flex-start;
                        flex-direction: column;
                    }
                }
                .machine-item-inner:hover {
                    transition: all .3s;
                    box-shadow: 0 0 2px 2px #2d8cf0;
                    .card-title {
                        font-weight: 700;
                        color: #fff;
                    }
                    .card-content {
                        color: #fff;
                    }
                }
            }
        }

    }
    @keyframes aniName {
        0% {
            color: rgba(255,255,255, 1);
            //transform: rotate(0deg);
            opacity: 1;
        }
        50% {
            color: rgba(255,255,255, .5);
            //transform: rotate(-16deg);
            opacity: .5;
        }
        100% {
            color: rgba(255,255,255, 1);
            //transform: rotate(0deg);
            opacity: 1;
        }
    }
</style>
